import React, { useEffect, useRef } from 'react'
import { useSelector } from 'react-redux'
import { Header } from 'src/components'
import { getImgPath } from 'src/utils'
import BScroll from 'better-scroll'
import { localapi, proapi, imgBaseUrl } from 'src/config/env'
import './index.scss'

const ShopSafe = () => {

    const { shopDetail } = useSelector(state => state)
    const scrollRef = useRef()
    
    useEffect(() => {
        new BScroll(scrollRef.current, {
            deceleration: 0.001,
            bounce: true,
            swipeTime: 1800,
            onclick: true,
        });
    }, [])

    return <div className="page_shop_shopdetail_shopsafe">
        <Header title="食品监督安全公示" goBack></Header>
        <section ref={scrollRef} className="scroll_container">
            <section>
                <section className="shop_status_container">
                    <header>食品监督安全公示</header>
                    <section className="shop_statu_detail">
                        <div>
                            {
                                shopDetail.status === 1 ?
                                    <svg className="shop_status" >
                                        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#res-well"></use>
                                    </svg>
                                    :
                                    <svg className="res-well">
                                        <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#res-bad"></use>
                                    </svg>
                            }
                        </div>
                        <div className="check_date">
                            <p>
                                <span>监督检查结果：</span>
                                {
                                    shopDetail.status === 1 ?
                                        <span className="shop_status_well">良好</span>
                                        :
                                        <span className="shop_status_bad">差</span>
                                }
                            </p>
                            <p>
                                <span>检查日期：</span>
                                <span>{shopDetail.identification.identificate_date && shopDetail.identification.identificate_date.split('T')[0]}</span>
                            </p>
                        </div>
                    </section>
                </section>
                <section className="shop_status_container">
                    <header>
                        <span>工商登记信息</span>
                    </header>
                    <ul>
                        <li>
                            <p>企业名称</p>
                            <p>{shopDetail.identification.company_name}</p>
                        </li>
                        <li>
                            <p>工商执照注册号</p>
                            <p>{shopDetail.identification.identificate_agency}</p>
                        </li>
                        <li>
                            <p>注册资本</p>
                            <p>{shopDetail.identification.registered_number}</p>
                        </li>
                        <li>
                            <p>注册地址</p>
                            <p>{shopDetail.identification.registered_address}</p>
                        </li>
                        <li>
                            <p>属地监管所</p>
                            <p>{shopDetail.identification.registered_principal}</p>
                        </li>
                        <li>
                            <p>法定代表人</p>
                            <p>{shopDetail.identification.legal_person}</p>
                        </li>
                        <li>
                            <p>经营范围</p>
                            <p>{shopDetail.identification.operation_period}</p>
                        </li>
                    </ul>
                </section>
                <section className="shop_status_container">
                    <header>餐饮许可证</header>
                    <ul>
                        <li>
                            <p>营业范围</p>
                            <p>{shopDetail.identification.operation_period}</p>
                        </li>
                        <li>
                            <p>许可证有效期</p>
                            <p>{shopDetail.identification.licenses_date}</p>
                        </li>
                        <li>
                            <p>许可证号</p>
                            <p>{shopDetail.identification.licenses_number}</p>
                        </li>
                        <li>
                            <p>发证时间</p>
                            <p>{shopDetail.identification.licenses_scope}</p>
                        </li>
                        <li>
                            <p>发证机关</p>
                            <p>{shopDetail.identification.registered_principal}</p>
                        </li>
                    </ul>
                </section>
                <section className="license_img shop_status_container">
                    <header>许可证书</header>
                    <div className="img_container">
                        <img src={localapi || proapi ? imgBaseUrl + shopDetail.license.business_license_image : getImgPath(shopDetail.license.business_license_image)} alt="" />
                        <img src={localapi || proapi ? imgBaseUrl + shopDetail.license.catering_service_license_image : getImgPath(shopDetail.license.catering_service_license_image)} alt="" />
                    </div>
                </section>
            </section>
        </section>
    </div>
}
export default ShopSafe